<template>
	<view>
		<view class="blank"></view>
		<view class="content">
			<view class="reportUser">
				<view class="reportTitle">举报用户</view>
				<view>
				  <image class="headImg" :src="option.avatar[0]"></image>
				</view>
				<view class="reportName">{{option.nickname}}</view>
			</view>
			<view  class="reportTitle" style="margin-top: 60rpx;">举报原因</view>
			<view class="reportCause">
				<view :class="[item.id==curId?'curreportList':'','reportList']"  @click="curId=item.id" v-for="item in typelist">
					<view class="causeTitle">{{item.name}}</view>
				</view>
			</view>
			<view class="reportTitle" style="margin-top: 20rpx;">图片证据</view>
			<!-- <image class="photoImg" :src="imgUrl" @click="photoImage"></image> -->
			<imgUpload :count="count" :img_list="img_list" @obtain_img="obtain_img" :name="name" :header="header" :url="url"></imgUpload>
			<view class="reportTitle" style="margin-top: 50rpx;">投诉内容</view>
			<view class="reportContent">
				<span class="mark">{{textareaContent.length}}/{{200-textareaContent.length}}</span>
			    <textarea placeholder="请填写详细举报理由" v-model="textareaContent"></textarea>
			</view>
			<view>
				<view class="buttom" @click="submit">
					确认举报
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import imgUpload from '../../components/linzq-imgUpload/linzq-imgUpload.vue'
	export default {
		components:{
			imgUpload
		},
		data() {
			return {
				imgUrl:'../../static/pages/upload.png',
				textareaContent:'',
				option:{},
				typelist:[],
				curId:'',
				img_list:[],
				count: 3,
				name: '',   //必填
				url: 'https://sx.hualin688.com',    //必填
				header: {} ,
			}
		},
		onLoad(option){
			// console.log(option)
			option.avatar = JSON.parse(option.avatar)
			this.option = option
			// this.getData(this.option)
			this.getDataType()
		},
		methods:{
			obtain_img(data) {
				// console.log(data, "获取到的图片组" + data.length + "张")
				this.img_list = data
			},
			submit(){
				if(this.textareaContent==''){
					this.$utils.showLayer('请输入举报内容')
					return
				}
				let that = this
				this.$utils.postrequest('/api/user/complaint/add', {
					ts_user_id:uni.getStorageSync('userId'),
					content:that.textareaContent,
					image:JSON.stringify(that.img_list),
					complaint_type_id:that.curId
					
				}, function (res) {
					// console.log(res)
				   if(res.code==200){
					   // console.log('局报成功')
					   that.$utils.showLayer('提交成功')
					   that.textareaContent = ''
					   that.img_list=[]
					   that.curId = that.typelist[0].id
					}
				})
			},
			getDataType(option){
				let that = this
				this.$utils.request('/api/complaint/type', {
				}, function (res) {
				   if(res.code==200){
					   that.typelist = res.data
					   if(that.typelist.length>0){
						   that.curId = that.typelist[0].id
					   }
					}
				})
			},
			photoImage(){
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
				        // console.log(JSON.stringify(res.tempFilePaths));
				    }
				});
			}
		}
	}
</script>

<style scoped>
	page{
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
	.blank{
		width: 100%;
		height: 2rpx;
		background: #E2E0EB;
	}
	.content{
		margin: 35rpx 31rpx;
	}
	.reportUser{
		display: flex;
		flex-direction: row;
	}
	.reportTitle{
		
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
	}
	.headImg {
		height: 41rpx;
		width: 41rpx;
		margin-left: 31rpx;
	}
	.reportName{
		margin-left: 22rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
	}
	.reportCause{
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		margin-top: 35rpx;
	}
	.reportList{
		width: 30%;
		margin-right: 15rpx;
		height: 83rpx;
		background: #F6F7F9;
		border: 1px solid #E6E4EE;
		border-radius: 5px;
		margin-bottom: 20rpx;
		line-height: 83rpx;
	}
	.curreportList{
		background-color: #6ac7fc !important;
		border: 1px solid #E6E4EE;
		color: #fff;
	}
	.photoImg{
		width: 220rpx;
		height: 220rpx;
		margin-top: 35rpx;
	}
	.reportContent{
		margin-top: 35rpx;
		width: 688rpx;
		height: 248rpx;
		background: #F6F7F9;
		border: 1px solid #E6E4EE;
		border-radius: 10rpx;
	}
	textarea {
	  min-height: 300rpx;
	  max-height: 300rpx;
	  padding: 10rpx 10rpx;
	  font-size: 26rpx;
	  width: 94%;
	  margin-left: 3%;
	  margin-top: 15rpx;
	  line-height: 50rpx;
	}
	.mark{
		 position:absolute;
		 /* position: flex-direction; */
		 font-size: 20rpx;
		 font-family: PingFang SC;
		 
		 color: #B7B4C8;
		 line-height: 30rpx;
		 margin: 190rpx 0rpx 0rpx 580rpx;
	}
	.buttom {
		width: 704rpx;
		height: 121rpx;
		margin: 130rpx auto;
		
		color:white;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #3699FF;
		border-radius: 100rpx;
	}
</style>
